/* date picker
*/
.el-date-picker,
.el-date-range-picker {
  --el-datepicker-text-color: var(--text-content-darkest);
  --el-datepicker-off-text-color: var(--text-content-soft);
  --el-datepicker-header-text-color: var(--text-content-subtle);
  --el-datepicker-icon-color: var(--text-content-dark);
  --el-datepicker-border-color: var(--stroke-border-cta-disabled);
  --el-datepicker-inner-border-color: var(--stroke-divider-subtle);
  --el-datepicker-inrange-bg-color: var(--surface-tonal-rest);
  --el-datepicker-inrange-hover-bg-color: var(--surface-tonal-hover);
  --el-datepicker-sidebar-width: 160px;
}
.el-date-picker {
  width: 376px;
  .el-picker-panel__content {
    margin: 0 20px 20px 20px;
    width: 336px;
  }
  .el-date-picker__time-header {
    padding: 0 15px 20px 15px;
    border-bottom: 0;
  }
  .el-date-picker__editor-wrap:first-child {
    text-align: right;
  }
  .el-input--small {
    @apply w-24 text-body-3;
    --input-size-small: 24px;
    .el-input__wrapper {
      @apply rounded;
    }
  }
  &.has-time {
    .el-picker-panel__body {
      position: relative;
      padding-bottom: 50px;
    }
    .el-date-picker__time-header {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  &.has-sidebar {
    width: calc(376px + var(--el-datepicker-sidebar-width));
  }
}
.el-date-picker__header {
  margin: 20px 20px 0 20px;
  .el-picker-panel__icon-btn {
    margin-top: 0;
  }
  .el-date-picker__header-label {
    @apply text-title-3;
    padding: 0 2px;
    color: var(--text-content-dark);
  }
}

.el-date-table {
  th {
    @apply text-body-2;
    padding: 14px 0;
    border: 0;
  }
  td {
    @apply w-12 h-12 p-0;
    .el-date-table-cell {
      @apply h-11 p-0;
      .el-date-table-cell__text {
        @apply w-11 h-11 flex items-center justify-center text-body-2;
      }
    }
    &.start-date {
      .el-date-table-cell {
        @apply ml-0 rounded-l-[22px];
      }
    }
    &.end-date {
      .el-date-table-cell {
        @apply mr-0 rounded-r-[22px];
      }
    }
    &.in-range {
      &:first-child {
        .el-date-table-cell {
          @apply rounded-l-[22px];
        }
      }
      &:last-child {
        .el-date-table-cell {
          @apply rounded-r-[22px];
        }
      }
    }
  }
}

.el-picker-panel__footer {
  padding: 20px;
  background-color: transparent;
}

.el-picker-panel__sidebar {
  padding-top: 8px;
  width: var(--el-datepicker-sidebar-width);
  background-color: transparent;
  & + .el-picker-panel__body {
    margin-left: var(--el-datepicker-sidebar-width);
  }
}
.el-picker-panel__shortcut {
  @apply pl-6 py-3 text-body-2;
}

/* range */
.el-date-range-picker {
  width: 742px;
  .el-picker-panel__body {
    min-width: 742px;
  }
  .el-date-range-picker__content {
    @apply p-5;
    &.is-left {
      border-right: 0;
    }
  }
  .el-date-range-picker__time-header {
    @apply flex items-center justify-center;
    padding: 0 15px 20px 15px;
    border-bottom: 0;
    & > span {
      @apply flex;
    }
  }
  .el-input--small {
    @apply w-24 text-body-3;
    --input-size-small: 24px;
    .el-input__wrapper {
      @apply rounded;
    }
  }
  .el-date-range-picker__editors-wrap {
    @apply flex items-center justify-end;
    &.is-right {
      @apply justify-start;
    }
  }
  .el-date-range-picker__time-picker-wrap {
    @apply flex px-1;
  }
  &.has-time {
    .el-picker-panel__body {
      position: relative;
      padding-bottom: 50px;
    }
    .el-date-range-picker__time-header {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  &.has-sidebar {
    width: calc(742px + var(--el-datepicker-sidebar-width));
  }
}

/* editor */
.el-date-editor {
  &.el-input__wrapper {
    --el-component-size-large: 48px;
    --el-component-size: 44px;
    --el-component-size-small: 36px;
    --el-input-height: 36px;
  }
  .el-range__icon {
    color: var(--text-content-medium);
  }
  .el-range-input {
    font-size: 14px;
    color: var(--text-content-darkest);
  }
}
